<template>
    <div class="form-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>评阅答辩申请</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        <div class="title-input">答辩申请</div>-->
        <h2>答辩申请</h2>
        <el-form label-width="140px" class="demo-ruleForm" ref="form" :model="form">
            <el-form-item label="论文题目" prop="paperName" class="long-length-input">
                <el-input
                        placeholder="输入你的论文题目"
                        v-model="form.paperName"></el-input>
            </el-form-item>
            <el-form-item label="论文关键字" prop="paperkeywords">
                <div v-for="(item, index) in form.paperkeywords" :key="index" class="long-length-input">
                    <el-input
                            class="long-length-input"
                            placeholder="输入关键字"
                            style="width:33.3333%"
                            v-model="item.keyword"></el-input>
                    <el-button icon="el-icon-plus" @click="addKeyword"
                               v-if="index === form.paperkeywords.length - 1"
                               style="margin-left: 10px"></el-button>
                    <el-button icon="el-icon-minus" @click="removeKeyword(index)"
                               v-if="form.paperkeywords.length > 1"
                               style="margin-left: 10px"></el-button>
                </div>
            </el-form-item>
            <el-form-item label="论文撰写开始日期" class="long-length-input">
                <el-col :span="11">
                    <el-date-picker
                            type="date"
                            placeholder="请选择撰写开始日期"
                            v-model="form.startDate"
                            :disabled="false">
                    </el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="论文撰写结束日期" class="long-length-input">
                <el-col :span="11">
                    <el-date-picker
                            type="date"
                            placeholder="请选择撰写结束日期"
                            v-model="form.finishDate"
                            :disabled="!form.startDate"
                            @change="checkDate1">
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="论文答辩日期" class="long-length-input">
                <el-col :span="11">
                    <el-date-picker
                            type="date"
                            placeholder="请选择答辩日期"
                            v-model="form.defenceDate"
                            :disabled="!form.finishDate"
                            @change="checkDate2">
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="导师工作单位"
                          prop="stuAdvisorWorkplace"
                          class="long-length-input">
                <el-input
                        class="middle-length-input"
                        placeholder="输入导师工作单位"
                        v-model="form.stuAdvisorWorkplace"></el-input>
            </el-form-item>
            <el-form-item label="导师从事科学领域"
                          prop="stuAdvisorField"
                          class="long-length-input">
                <el-input
                        class="middle-length-input"
                        placeholder="输入导师从事科学领域"
                        v-model="form.stuAdvisorField"></el-input>
            </el-form-item>
            <el-form-item label="导师专业技术职称" prop="stuAdvisorTitle" class="long-length-input">
                <el-select v-model="form.stuAdvisorTitle" placeholder="选择导师职称" class="middle-length-input">
                    <el-option label="教授" value="教授"></el-option>
                    <el-option label="副教授" value="副教授"></el-option>
                    <el-option label="高级工程师" value="高级工程师"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="导师指导小组人数" prop="howmanypeple" class="long-length-input">
                <el-select v-model="form.totalTutors" placeholder="选择人数" class="short-length-input">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10人及以上" value="10人及以上"></el-option>
                </el-select>
                人
            </el-form-item>
            <el-form-item label="答辩秘书姓名"
                          prop="secretaryName"
                          class="middle-length-input">
                <el-input
                        class="middle-length-input"
                        placeholder="输入答辩秘书姓名"
                        v-model="form.secretaryName"></el-input>
            </el-form-item>
            <el-form-item label="答辩秘书工号"
                          prop="secretaryId"
                          class="middle-length-input">
                <el-input
                        class="middle-length-input"
                        placeholder="输入答辩秘书工号"
                        v-model="form.secretaryId"></el-input>
            </el-form-item>
            <el-form-item label="答辩形式" prop="defenceType" class="middle-length-input">
                <el-select v-model="form.defenceType" placeholder="选择答辩形式" class="middle-length-input">
                    <el-option label="线上" value="线上"></el-option>
                    <el-option label="线下" value="线下"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交申请</el-button>
                <el-button type="info" @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import axios from "axios";


export default {
    data() {
        return {
            form: {
                paperName: '',
                paperkeywords: [{keyword: 'a'}, {keyword: 'b'}],
                isblind: '',
                blindtime: '',
                startDate: '',
                finishDate: '',
                defenceDate: '',
                stuAdvisorWorkplace: '',
                stuAdvisorField: '',
                stuAdvisorTitle: '',
                totalTutors: '',
                secretaryName: '',
                secretaryId: '',
                defenceType: ''
            },
            result: '',
            userId: '',
        };
    },
    methods: {
        getPaperInfo() {
            axios({
                url: `http://localhost:8888/request/defence/paper/detail/${this.id}`,
                method: "get",
                responseType: "json"
            }).then(res => {
                const paper = res.data.data;
                const keywordsArray = paper.keywords.split(',');
                this.form.paperName = paper.paperName;
                this.form.paperkeywords = keywordsArray.map(keyword => ({keyword}));
                this.form.startDate = paper.startDate;
                this.form.finishDate = paper.finishDate;
                this.form.defenceDate = paper.defenceDate;
            }).catch(err => {
                console.log(err)
            })
        },
        updatePaperInfo() {
            const keywords = this.form.paperkeywords.map(item => item.keyword).join(',');
            axios({
                url: `http://localhost:8888/request/defence/paper/edit/${this.id}`,
                method: "put",
                data: {
                    "paperName": this.form.paperName,
                    "keywords": keywords,
                    "startDate": this.form.startDate,
                    "finishDate": this.form.finishDate,
                    "defenceDate": this.form.defenceDate,
                },
            })
                .then(res => {
                    console.log(res);
                    // 根据需要处理请求成功后的逻辑
                })
                .catch(err => {
                    console.log(err);
                    // 根据需要处理请求失败后的逻辑
                });
        },
        getAdvisorInfo() {
            axios({
                url: `http://localhost:8888/request/defence/advisor/detail/${this.id}`,
                method: "get",
                responseType: "json",
            }).then(res => {
                const adviser = res.data.data;
                this.form.stuAdvisorWorkplace = adviser.stuAdvisorWorkplace;
                this.form.stuAdvisorField = adviser.stuAdvisorField;
                this.form.stuAdvisorTitle = adviser.stuAdvisorTitle;
            }).catch(err => {
                console.log(err)
            })
        },
        updateAdvisorInfo() {
            axios({
                url: `http://localhost:8888/request/defence/advisor/edit/${this.id}`,
                method: "put",
                data: {
                    "stuAdvisorField": this.form.stuAdvisorField,
                    "stuAdvisorTitle": this.form.stuAdvisorTitle,
                    "stuAdvisorWorkplace": this.form.stuAdvisorWorkplace,
                },
            })
                .then(res => {
                    console.log(res);
                    // 根据需要处理请求成功后的逻辑
                })
                .catch(err => {
                    console.log(err);
                    // 根据需要处理请求失败后的逻辑
                });
        },
        getDefenceInfo() {
            axios({
                url: `http://localhost:8888/request/defence/defence/detail/${this.id}`,
                method: "get",
                responseType: "json",
            }).then(res => {
                const defence = res.data.data;
                this.form.totalTutors = defence.totalTutors;
                this.form.secretaryName = defence.secretaryName;
                this.form.secretaryId = defence.secretaryId;
                this.form.defenceType = defence.defenceType;
            })
        },
        resetForm() {
            console.log(111)
            this.$refs.form.resetFields();
        },
        addKeyword() {
            this.form.paperkeywords.push({keyword: ''});
        },
        removeKeyword(index) {
            this.form.paperkeywords.splice(index, 1);
        },
        checkDate1() {
            if (this.date2 && this.date2 < this.date1) {
                this.date2 = this.date1;
            }
            if (this.date3 && this.date3 < this.date2) {
                this.date3 = this.date2;
            }
        },
        checkDate2() {
            if (this.date3 < this.date2) {
                this.date3 = this.date2;
            }
            if (this.date3 < this.date1) {
                this.date3 = this.date1;
            }
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 验证通过，提交表单
                    this.updatePaperInfo();
                    this.updateAdvisorInfo();
                    alert('提交成功!');
                } else {
                    alert('提交失败，请重新提交');
                    return false;
                }
            });
        },
    },
    mounted() {
        this.id = localStorage.getItem("username");
        this.getPaperInfo();
        this.getDefenceInfo();
        this.getAdvisorInfo();
    }

}
</script>

<style scoped>
</style>
